<%--
  Created by IntelliJ IDEA.
  User: Stephen
  Date: 2020/6/22
  Time: 9:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>

    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <link href="assets/admin/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/admin/style.css"/>
    <link rel="stylesheet" href="assets/admin/css/ace.min.css"/>
    <link rel="stylesheet" href="fonts/admin/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/layui/layui.css" media="all">

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="assets/admin/js/typeahead-bs2.min.js"></script>
    <script src="assets/admin/layer/layer.js" type="text/javascript"></script>


    <title>角色维护</title>

</head>
<body>
<div class="page-content clearfix">
    <table class="layui-hide" id="table" lay-filter="table"></table>
</div>

<!-- 点击添加按钮后的弹出窗口 -->
<div class="sort_style_add margin" id="sort_style_add" style="display:none">
    <div class="">
        <ul>
            <li><label class="label_name">分类名称</label>
                <div class="col-sm-9"><input name="分类名称" type="text" id="form-field-1" placeholder=""
                                             class="col-xs-10 col-sm-5"></div>
            </li>
            <li><label class="label_name">分类说明</label>
                <div class="col-sm-9"><textarea name="分类说明" class="form-control" id="form-field-8" placeholder=""
                                                onkeyup="checkLength(this);"></textarea><span class="wordage">剩余字数：<span
                        id="sy" style="color:Red;">200</span>字</span></div>
            </li>
            <li><label class="label_name">分类状态</label>
                <span class="add_content"> &nbsp;&nbsp;<label><input name="form-field-radio1" type="radio"
                                                                     checked="checked" class="ace"><span
                        class="lbl">显示</span></label>&nbsp;&nbsp;&nbsp;
                <label><input name="form-field-radio1" type="radio" class="ace"><span class="lbl">隐藏</span></label></span>
            </li>
        </ul>
    </div>
</div>
<%-- 自定义顶部栏模板 --%>
<script type="text/html" id="toolbarTemplate">
    <a href="javascript:void(0);" onclick="add()" class="btn btn-warning"><i class="fa fa-plus"></i> 添加</a>
    <a href="javascript:void(0);" onclick="deleteBatch()" class="btn btn-danger"><i class="fa fa-trash"></i> 批量删除</a>
</script>

<script src="js/layui/layui.js"></script>
<script type="text/javascript">

    layui.use(['table'], function () {

        var table = layui.table;

        /* where: {version:1.1, cl:app,page:1}  请求参数 */
        table.render({
            elem: '#table',
            method: 'POST', // 请求方式
            url: 'sight/findAllSightByPage',
            height: 440,
            page: true, // 开启分页
            limit: 10, // 每页显示的数据条数
            limits: [5, 10, 15, 20, 30, 50], // 每页显示数据可选项
            toolbar: '#toolbarTemplate', //开启工具栏，此处显示默认图标，可以自定义模板
            cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'permissionId', title: '权限ID', width: "20%", sort: true, fixed: 'left'},
                {field: 'permissionName', title: '权限名称', width: "20%"},
                {field: 'url', title: '权限的访问路径', width: "20%"},
                {field: 'description', title: '权限描述', width: "20%"},
                {fixed: 'right', title: '操作', toolbar: '#operateTemplate', width: "20%"}
            ]],
            done: function (res) {
                table = res.data;
            }
        });

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var data = obj.data;
            /* 删除行数据 */
            if(obj.event === 'del'){

            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });

    /* 添加按钮点击事件 */
    function add() {
        layer.open({
            type: 1,
            title: '添加分类',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            area: ['750px', ''],
            content: $('#sort_style_add'),
            btn: ['提交', '取消'],
            yes: function (index, layero) {
                var num = 0;
                var str = "";
                $(".sort_style_add input[type$='text']").each(function (n) {
                    if ($(this).val() == "") {

                        layer.alert(str += "" + $(this).attr("name") + "不能为空！\r\n", {
                            title: '提示框',
                            icon: 0,
                        });
                        num++;
                        return false;
                    }
                });
                if (num > 0) {
                    return false;
                } else {
                    layer.alert('添加成功！', {
                        title: '提示框',
                        icon: 1,
                    });
                    layer.close(index);
                }
            }
        });
    }

    /* 批量删除按钮 */
    function deleteBatch() {

    }

    function checkLength(which) {
        var maxChars = 200; //
        if (which.value.length > maxChars) {
            layer.open({
                icon: 2,
                title: '提示框',
                content: '您出入的字数超多限制!',
            });
            // 超过限制的字数了就将 文本框中的内容按规定的字数 截取
            which.value = which.value.substring(0, maxChars);
            return false;
        } else {
            var curr = maxChars - which.value.length; //250 减去 当前输入的
            document.getElementById("sy").innerHTML = curr.toString();
            return true;
        }
    };

    /*广告图片-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要关闭吗？', {icon: 0,}, function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="显示"><i class="fa fa-close bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已关闭</span>');
            $(obj).remove();
            layer.msg('关闭!', {icon: 5, time: 1000});
        });
    }

    /*广告图片-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要显示吗？', {icon: 0,}, function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="关闭"><i class="fa fa-check  bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">显示</span>');
            $(obj).remove();
            layer.msg('显示!', {icon: 6, time: 1000});
        });
    }

    /**
     * 通过id删除数据
     * @param id
     * @param obj
     */
    function deleteById(id, obj) {
        layer.confirm('真的删除行么', function(index){
            layer.close(index);
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    //面包屑返回值
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.iframeAuto(index);
    $('.Order_form ,.ads_link').on('click', function () {
        var cname = $(this).attr("title");
        var cnames = parent.$('.Current_page').html();
        var herf = parent.$("#iframe").attr("src");
        parent.$('#parentIframe span').html(cname);
        parent.$('#parentIframe').css("display", "inline-block");
        parent.$('.Current_page').attr("name", herf).css({"color": "#4c8fbd", "cursor": "pointer"});
        //parent.$('.Current_page').html("<a href='javascript:void(0);' name="+herf+">" + cnames + "</a>");
        parent.layer.close(index);

    });

    function AdlistOrders(id) {
        window.location.href = "Ads_list.html?=" + id;
    }
</script>
</body>
</html>
